<template>
  <n-el tag="div" class="div-one-01">
    <span style="width: 30%; margin-top: 1%"
      ><n-image :src="myData.img" width="90" height="110"></n-image
    ></span>
    <span style="width: 70%; font-size: 15px">
      <span> 标 题: {{ handleTitle(myData.title || "") }}</span
      ><br />
      <span> 价 格: {{ myData.price }}</span
      ><br />
      <span> 店 铺: {{ myData.shop }}</span
      ><br />
      <span> 销 量: {{ myData.commit }}</span
      ><br />
      <span> 类 别: {{ myData.keyword }}</span>
    </span>
  </n-el>
  <n-el tag="div" class="div-one-02">
    <span style="font-size: 20px"> 相关推荐：</span><br />
    <span>
      <span style="width: 50%" @click="toForecast(recommend[0])"
        ><n-image :src="recommend[0].img" width="130" height="170"></n-image
      ></span>
      <span
        style="width: 50%; margin-left: 80px"
        @click="toForecast(recommend[1])"
        ><n-image
          :src="recommend[1].img"
          width="130"
          height="170"
        ></n-image></span
    ></span>
  </n-el>
</template>


<script setup lang="ts" name="HZForecast06">
import { onMounted } from "vue";
import * as curdApi from "/@api/hz-curd-api";
import { ref } from "vue";
import imageUrl from "/@assets/jiazai.gif";

function getImageOnLocal(url: string) {
  if (url == null || url.includes("http")) {
    return url;
  }
  return "https:" + url.replace(".avif", "");;
}

const recommend = ref([{ img: imageUrl }, { img: imageUrl }]);

// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    default: "pie-simple",
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
  showLegend: {
    type: Boolean,
    default: true,
  },
  showTooltip: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: "信息卡片",
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  apiPath: {
    // api路径
    type: String,
    default: "",
  },
  chartsType: {
    // 图表类型
    type: String,
    default: "HZForecast06",
  },
  methodType: {
    type: String, // 请求方式
    default: "get",
  },
});

function handleTitle(text: string) {
  text = text
    .replace(/<font class=\"skcolor_ljg\">/g, "")
    .replace(/<\/font>/g, "");
  return text;
}

const myData = ref({});
onMounted(() => {});

function loadDataList() {
  recommend.value = [{ img: imageUrl }, { img: imageUrl }];
  getCom().then((res: any) => {
    recommend.value[0] = res.data[0];
    recommend.value[1] = res.data[1];
  console.log(res.data[0]);
  });
  recommend.value[0].img = getImageOnLocal(recommend.value[0].img).replace(".avif", "");
  recommend.value[1].img = getImageOnLocal(recommend.value[1].img).replace(".avif", "");
  
}

const getCom = async () => {
  return await curdApi.goGet(
    { id: myData.value.id },
    "/api/jd/big_screen/getCom16/"
  );
};

const refreshCharts = (data: any) => {
  myData.value = data;
  loadDataList();
};

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
});

function toForecast(msg: any) {
  refreshCharts(msg);
}
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

.div-one-01 {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
  overflow: auto;
  justify-content: center;
  flex-wrap: wrap;
  /* max-height: 120vh; */
}

.div-one-02 {
  width: 100%;
  /* max-height: 120vh; */
}
</style>